<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
	isLoading: Boolean,
	selectedElements: Array,
	elementalGroup: String,
})

const emit = defineEmits(['on-submit'])

const formRef = ref(null)

// 表单数据
const form = ref({
	pressure: null,
	calculationMode: 'temp_range',
})

const dynamicFields = {
	temp_range: [
		{
			props: 'tmin',
			value: 300,
			label: '最小温度(K)',
			max: 'tmax',
		},
		{
			props: 'tmax',
			value: 800,
			label: '最大温度(K)',
			min: 'tmin',
		},
		{
			props: 'tstep',
			value: 100,
			label: '温度步长',
			type: 'number',
		},
		{
			props: 'comp1',
			value: 'AL',
			label: '主动改变元素',
			type: 'select',
		},
		{
			props: 'comp1_value',
			value: 0.02,
			label: '元素成分',
		},
	],
	comp_range: [
		{
			props: 'temp',
			value: 600,
			label: '温度(K)',
		},
		{
			props: 'comp1',
			value: 'AL',
			label: '主动改变元素',
			type: 'select',
		},
		{
			props: 'comp1_xmin',
			value: 0,
			label: '最小成分',
			max: 'comp1_xmax',
		},
		{
			props: 'comp1_xmax',
			value: 0.99,
			label: '最大成分',
			min: 'comp1_xmin',
		},
		{
			props: 'comp1_xcount',
			value: 100,
			label: '成分步长',
			type: 'number',
		},
	],
}

const validationRules = ref({
	pressure: [{ required: true, message: '请输入压强', trigger: 'blur' }],
	tmin: [{ required: true, message: '请输入最小温度', trigger: 'blur' }],
	tmax: [{ required: true, message: '请输入最大温度', trigger: 'blur' }],
	tstep: [{ required: true, message: '请输入温度步长', trigger: 'blur' }],
	comp1: [{ required: true, message: '请选择元素', trigger: 'blur' }],
	comp1_value: [{ required: true, message: '请输入元素成分', trigger: 'blur' }],
	// 固定温度模式下的验证规则
	temp: [{ required: true, message: '请输入温度', trigger: 'blur' }],
	comp1_xmin: [{ required: true, message: '请输入最小成分', trigger: 'blur' }],
	comp1_xmax: [{ required: true, message: '请输入最大成分', trigger: 'blur' }],
	comp1_xcount: [
		{ required: true, message: '请输入成分步长', trigger: 'blur' },
	],
})

const onChange = (value) => {
	resetForm()

	nextTick(() => {
		form.value.calculationMode = value
	})
}

const submitForm = async () => {
	try {
		await formRef.value.validate()
		emit('on-submit', {
			...form.value,
			elements: props.selectedElements, // 元素成分
			tdb: props.elementalGroup + '.tdb', // TDB文件
		})
	} catch (error) {
		ElMessage.error('请检查表单输入')
	}
}

const resetForm = () => {
	form.value = {
		pressure: null,
		calculationMode: 'temp_range',
	}
}
</script>

<template>
	<div class="component-form">
		<el-form
			ref="formRef"
			:model="form"
			:rules="validationRules"
			label-width="100px"
		>
			<!-- 压力条件 -->
			<el-form-item label="压强(Pa)" prop="pressure">
				<el-input-number
					v-model="form.pressure"
					placeholder="请输入压强"
					:precision="0"
					:controls="false"
					class="inputNumber"
				/>
			</el-form-item>

			<!-- 计算模式选择 -->
			<el-form-item label="计算模式">
				<el-radio-group v-model="form.calculationMode" @change="onChange">
					<el-radio value="temp_range"> 固定成分 </el-radio>
					<el-radio value="comp_range"> 固定温度 </el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item
				v-for="(item, index) in dynamicFields[form.calculationMode]"
				:key="index"
				:label="
					item.label.includes('元素成分') && form.comp1
						? `${form.comp1} 成分`
						: item.label
				"
				:prop="item.props"
			>
				<div class="tempStyle">
					<el-input-number
						v-if="['温度步长'].includes(item.label)"
						v-model="form[item.props]"
						:min="1"
						:max="100"
						placeholder="请输温度入步长"
						:controls="false"
						class="inputNumber"
					/>
					<el-input-number
						v-else-if="['成分步长'].includes(item.label)"
						v-model="form[item.props]"
						:min="0.01"
						:max="1"
						placeholder="请输成分步长"
						:controls="false"
						class="inputNumber"
					/>
					<el-select
						v-else-if="item.type === 'select'"
						v-model="form[item.props]"
						placeholder="请选择"
						clearable
					>
						<el-option
							v-for="element in props.selectedElements"
							:key="element"
							:label="element"
							:value="element"
						/>
					</el-select>
					<el-input-number
						v-else-if="item.label.includes('最小温度(K)')"
						v-model="form[item.props]"
						:precision="2"
						:max="form[item.max] ?? 2000"
						:min="298.15"
						placeholder="请输入"
						:controls="false"
						class="inputNumber"
					/>
					<el-input-number
						v-else-if="item.label.includes('最大温度(K)')"
						v-model="form[item.props]"
						:precision="2"
						:max="2000"
						:min="form[item.min] ?? 298.15"
						placeholder="请输入"
						:controls="false"
						class="inputNumber"
					/>

					<el-input-number
						v-else-if="item.label.includes('最小成分')"
						v-model="form[item.props]"
						:precision="4"
						:max="form[item.max] ?? 0.9999"
						:min="0.0001"
						placeholder="请输入"
						:controls="false"
						class="inputNumber"
					/>
					<el-input-number
						v-else-if="item.label.includes('最大成分')"
						v-model="form[item.props]"
						:precision="4"
						:max="0.9999"
						:min="form[item.min] ?? 0.0001"
						placeholder="请输入"
						:controls="false"
						class="inputNumber"
					/>

					<el-input-number
						v-else-if="['成分'].includes(item.label)"
						v-model="form[item.props]"
						:precision="4"
						:max="0.9999"
						:min="0.0001"
						placeholder="请输入"
						:controls="false"
						class="inputNumber"
					/>

					<el-input-number
						v-else-if="['温度(K)'].includes(item.label)"
						v-model="form[item.props]"
						:precision="2"
						:max="2000"
						:min="298.15"
						placeholder="请输入"
						:controls="false"
						class="inputNumber"
					/>

					<el-input-number
						v-else
						v-model="form[item.props]"
						:precision="4"
						:max="0.9999"
						:min="0.0001"
						placeholder="请输入"
						:controls="false"
						class="inputNumber"
					/>
					<span
						class="text"
						v-if="item.label.includes('温度') && item.label !== '温度步长'"
						>{{
							item.label.includes('最小')
								? '最小温度 ≥ 298.15'
								: item.label.includes('最大')
									? '最大温度 ≤ 2000'
									: '温度(K)：289.15K ～ 2000K'
						}}
					</span>
				</div>
			</el-form-item>
		</el-form>

		<div class="form-actions">
			<el-button size="small" @click="resetForm"> 重置 </el-button>
			<el-button
				type="primary"
				size="small"
				:loading="props.isLoading"
				@click="submitForm"
			>
				计算
			</el-button>
		</div>
	</div>
</template>

<style scoped lang="scss">
.form-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 20px;

	:deep(.el-button) {
		flex: 1;
	}
}
// 表单验证错误状态
:deep(.el-form-item) {
	margin-bottom: 20px !important;
	.el-form-item__error {
		display: block !important;
	}
}

:deep(.inputNumber) {
	width: 100% !important;
	.el-input__wrapper {
		padding: 1px 11px !important;
		.el-input__inner {
			text-align: left;
		}
	}
}

.tempStyle {
	position: relative;
	width: 100%;
	.text {
		position: absolute;
		font-size: 0.75rem;
		bottom: -26.7px;
		right: 0;
	}
}
</style>

<style>
@import url('@/styles/element-plus/form.scss');
</style>
